<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<el-form ref="form" :model="ware" label-width="150px">
						<div class="taskInfo">

							<el-row>
								<el-col :span="11">
									<el-form-item label="一级品类：">
										<el-select v-model="catLev1" placeholder="请选择一级品类"  @change="selectLev1()">
											<el-option
											v-for="lev in lev1s"
											:key="lev.id"
											:value="lev.id"
											:label="lev.name">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="二级品类：">
										<el-select v-model="ware.categoryId" placeholder="请选择二级品类">
											<el-option
											v-for="lev in lev2s"
											:key="lev.id"
											:value="lev.id"
											:label="lev.name">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="22">
									<el-form-item label="商品名称：">
										<el-input v-model="ware.name" placeholder="请输入商品名称"></el-input>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="11">
									<el-form-item label="商户：">
										<el-select v-model="ware.venderId" placeholder="请选择商户">
											<el-option
											v-for="v in venders"
											:key="v.id"
											:value="v.id"
											:label="v.name">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
						</div>

            <div class="taskInfo">
              <div v-if="catLev1==3">
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="销售价格：">
                      <el-input v-model="ware.price" placeholder="请输入销售价格">
                        <template slot="append">糖果币</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="红包金额：">
                      <el-input v-model="ware.money" placeholder="请输入红包金额">
                        <template slot="append">人民币(元)</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="兑换规则：">
                      <el-select v-model="ware.sendType" placeholder="请选择规则">
                        <el-option
                          v-for="v in redPacketTypes"
                          :key="v.id"
                          :value="v.id"
                          :label="v.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="当前库存：">
                      <el-input v-model="ware.stock" placeholder="请输入库存数量"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div v-else>
                <el-row>
                <el-col :span="11">
                  <el-form-item label="销售价格：">
                    <el-input v-model="ware.price" placeholder="请输入销售价格">
                      <template slot="append">糖果币</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="当前库存：">
                    <el-input v-model="ware.stock" placeholder="请输入库存数量"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="参考价格：">
                      <el-input v-model="ware.referencePrice" placeholder="请输入参考价格">
                        <template slot="append">人民币(元)</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>

						<div class="taskInfo">
							<el-form-item label="商品图片：">
								<el-upload
								class="upload-demo"
								v-bind:action="uploadWareUrl"
								:on-remove="handleRemove"
								:on-success="handleSuccess"
								:on-error="handleError"
								:limit="5"
								:file-list="fileListWare"
								list-type="picture">
									<el-button size="small" type="primary">点击上传</el-button>
								</el-upload>
							</el-form-item>

							<el-form-item label="商品描述：">
								<el-input type="textarea" v-model="ware.description" placeholder="请输入商品描述"></el-input>
							</el-form-item>


							<el-form-item label="运营图片：">
								<el-upload
								class="upload-demo"
								v-bind:action="uploadWareManUrl"
								:on-remove="handleRemove"
								:on-success="handleSuccess"
								:on-error="handleError"
								:limit="5"
								:file-list="fileListWareMan"
								list-type="picture">
									<el-button size="small" type="primary">点击上传</el-button>
								</el-upload>
							</el-form-item>
						</div>

						<el-form-item>
							<el-button type="primary" @click="addWare()">确定</el-button>
							<el-button @click="cancelWare()">取消</el-button>
						</el-form-item>
					</el-form>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'
	// 配置API接口地址
	import config from "../../config.json"
	const Root = config.API_HOST;
	export default{
		name:'VenderAdd',
		methods: {
			selectLev1(){
				var that = this;
				that.lev2s = [];
				this.$api.get('/category/findByParentId/'+that.catLev1,null,function(data){
					if(data.flag=="success"){
						for(var i=0;i<data.data.length;i++){
							that.lev2s.push({
								"id":data.data[i].id,
								"name":data.data[i].name
							});
						}
					} else{
						this.$message.error(data.msg);
					}
				});
			},
      //添加商品方法
			addWare(){
				var that = this;
				this.$api.post('/shop/add',that.ware,function(data){
					if(data.flag=="success"){
						that.$router.push('/ware/list');
					} else{
						that.$message.error(data.msg);
					}
				});
			},
      //跳转商品列表方法
			cancelWare(){
				this.$router.push('/ware/list');
			},
			handleSuccess(response, file, fileList){
				if(response.flag=="success"){
					this.ware.wareImages.push(response.data.id);
				}
			},
			handleRemove(file,fileList){
				for(var i=0;i<this.ware.wareImages.length;i++){
					if(this.ware.wareImages[i]==file.response.data.id){
						this.ware.wareImages.splice(i,1);
						break;
					}
				}
			},
			handleError(){
				this.$message.error('上传图片失败');
			}
		},
		mounted(){
			var that = this;
			this.$api.get('/category/findByParentId/0',null,function(data){
				if(data.flag=="success"){
					for(var i=0;i<data.data.length;i++){
						that.lev1s.push({
							"id":data.data[i].id,
							"name":data.data[i].name
						});
					}
				} else{
					this.$message.error(data.msg);
				}
			});

			this.$api.get('/vender/getAll',null,function(data){
				if(data.flag=="success"){
					for(var i=0;i<data.data.length;i++){
						that.venders.push({
							"id":data.data[i].id,
							"name":data.data[i].name
						});
					}
				} else{
					this.$message.error(data.msg);
				}
			});
		},
		data:function(){
			return {
				uploadWareUrl:Root+"/shop/image/upload/1",
				uploadWareManUrl:Root+"/shop/image/upload/2",
				lev1s:[],
				lev2s:[],
				venders:[],
				fileListWare:[],
				fileListWareMan:[],
				navs:["兑换商城管理","新建商品"],
        redPacketTypes:this.GLOBAL.redPacketTypes,
				catLev1:"",
				ware:{
					categoryId:"",
					name:"",
					price:"",
					stock:"",
					venderId:"",
					description:"",
					wareImages:[],
          money:"",
          sendType:"",
          referencePrice:""
				}
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>
	.taskInfo{
		padding: 20px;
		border: 1px solid #dddddd;
		margin-bottom: 20px;
	}
	#changePercent{
		width: 110px !important;
	}
</style>
